<template>
    <div class="account-set-manager-detail">
        <el-card shadow="never" v-loading="loading">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules">
                <el-form-item label="姓名" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入在系统内展现的姓名或昵称"
                        class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="account">
                    <el-input
                        v-model="form.account"
                        placeholder="请输入管理者后台登录所需的账号邮箱"
                        class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入管理者的联系电话" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <file-upload :type="1" :multiple="false" v-model="form.avatar">
                        <img
                            v-if="form.avatar"
                            :src="form.avatar"
                            class="uploader-icon picture image-uploader"/>
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-select class="w-full input-width" v-model="form.position" placeholder="请选择">
                        <el-option
                            v-for="item in positionOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="团队" prop="team">
                    <el-select class="w-full input-width" v-model="form.team" placeholder="请选择">
                        <el-option
                            v-for="item in teamOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="身份" prop="identity_id">
                    <el-select class="w-full input-width" v-model="form.identity_id" placeholder="请选择">
                        <el-option
                            v-for="item in identityOptions"
                            :key="item.id"
                            :label="item.identity"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input
                        show-word-limit
                        rows="4"
                        type="textarea"
                        v-model="form.description"
                        placeholder="一句话介绍管理者，少于100字。"
                        maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button type="primary" @click="onSave">保 存</el-button>
                <el-button @click="onBack">返 回</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import FileUpload from '@/components/base/FileUpload';

export default {
    components: {
        FileUpload,
    },
    data() {
        return {
            loading: false,
            id: '',
            form: {
                account: '',
                name: '',
                phone: '',
                avatar: '',
                position: '',
                team: '',
                identity_id: '',
                descriptio: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入在系统内展现的姓名或昵称', trigger: 'blur' },
                ],
                account: [
                    { required: true, message: '请输入管理者后台登录所需的账号邮箱', trigger: 'blur' },
                ],
            },

            positionOptions: [],
            teamOptions: [],
            identityOptions: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                const form = this.form;

                const api = this.id ? 'put' : 'post';
                form.identity_id = form.identity_id ? form.identity_id : '';

                API[api]('company_staff', this.form).then((res) => {
                    $ele.$message.success(`${this.id ? '编辑' : '新增'}成功`);
                    if (!this.id) {
                        $ele.$confirm(`请记录账号密码。账号：${this.form.account}，密码：${res.password}`, '提示', {
                            confirmButtonText: '确定',
                            type: 'warning',
                        }).then(() => {
                            this.onBack();
                        }).catch(() => this.onBack());
                    } else this.onBack();
                });
            });
        },

        getDetail() {
            this.loading = true;
            API.get(`company_staff/${this.id}`).then(res => {
                this.form = res;
                this.form.position = res.position ? +res.position : '';
                this.form.identity_id = res.identity_id ? res.identity_id : '';
            }).finally(() => this.loading = false);
        },

        fetchPositionData() {
            API.get('position/list').then((res) => {
                this.positionOptions = res;
            });
        },

        fetchTeam() {
            API.get('role/list', {
                params: {
                    type: 3,
                },
            }).then((res) => {
                this.teamOptions = res;
            });
        },

        fetchIdentity() {
            API.get('company_identity').then((res) => {
                this.identityOptions = res;
            });
        },

        onBack() {
            this.$router.back();
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        if (this.id) this.getDetail();

        this.fetchPositionData();
        this.fetchTeam();
        this.fetchIdentity();
    },
};
</script>

<style lang="scss">
.account-set-manager-detail {
    .input-width {
        max-width: 300px;
    }

    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }

    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }

    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
</style>
